<template>
    <div class="page-wrap">
        <div class="page-title">cdsRegionSite 地域选择</div>
        <p class="page-description">该组件只显示地域及城市，及可用区</p>
        <div class="page-sub-title">基本用法</div>
        <codeShow :code="code1">
            <CdsRegionSite v-model="site" :regionList="region_list" @getCitySiteInfo="getRegionSite">
                <template #disabledRegionCityTip="scope">
                    禁用{{scope.row.city_name}}--{{scope.index}}的提示
                </template>
                <template #disabledRegionSiteTip="scope">
                    禁用{{scope.row.site_name}}--{{scope.index}}的提示
                </template>
            </CdsRegionSite><br/>
            <p>返回 @getCitySiteInfo 的结果</p>
            {{text}}
        </codeShow>
        <div class="page-sub-title">cdsRegionSite API</div>
        <el-table :data="cdsRegionTable" style="margin-top:20px;margin-bottom: 48px;">
            <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
            <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
            <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
            <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
        </el-table>
        <div class="page-sub-title">cdsRegionSite slot</div>
        <div>当城市及可用区有disabled为true时，当前城市将置灰不可点击，并显示提示文字，文字在 slot disabledRegionCityTip中设置；当前可用区置灰不可点击，并显示提示文字，文字在 slot disabledRegionSiteTip中设置</div>
        <div class="page-sub-title">cdsRegionSite 方法</div>
        <el-table :data="cdsRegionFunTable" style="margin-top:20px;margin-bottom: 48px;">
            <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
            <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
    import { CdsRegionSite } from 'cds-ui-business-components'
    import codeShow from '../../components/code.vue'
    import { ref } from 'vue'
    const site = ref('')
    const text = ref('')
    const code1 = `
<CdsRegionSite v-model="site" :regionList="region_list" @getCitySiteInfo="getRegionSite">
    <template #disabledRegionCityTip="scope">
        禁用{{scope.obj.city_name}}--{{scope.index}}的提示
    </template>
    <template #disabledRegionSiteTip="scope">
        禁用{{scope.obj.site_name}}--{{scope.index}}的提示
    </template>
</CdsRegionSite>
// regionList需要传输数据的格式为
// vdc的地域格式
[
    {
      "region_id":"6475773a-fa78-11e6-88c6-30b49e091019",
      "region_name":"欧洲地区",
      "city_list":[
         {
             "city_name":"法兰克福",
             "city_id":"7b98a5d1-306e-11e7-9796-0050569b4d9c",
             "disabled": true // 若为true，该城市将置灰，提示文字在 slot disabledRegionCityTip中设置,
             "site_list":[
                {
                    "site_name":"可用区B",
                    "site_id":"bd8546e3-197c-47ef-b970-17364fb5132a",
                    "disabled":false, // 若为true，该可用区将置灰，提示文字在 slot disabledRegionSiteTip中设置,
                },
             ]
         }
      ]
    }
]
// vpc的地域格式
[
    {
        "zone_id":"6475773a-fa78-11e6-88c6-30b49e091019",
        "zone_name":"欧洲地区",
        "region_list":[
            {
                "region_name":"法兰克福",
                "region_id":"7b98a5d1-306e-11e7-9796-0050569b4d9c",
                "available_zone_list": [
                    {
                        "available_zone_id": '1111',
                        "available_zone_name": "可用区A",
                        "disabled": false // 若为true，该可用区将置灰，提示文字在 slot disabledRegionSiteTip中设置,
                    }
                ],
                "disabled": false // 若为true，该城市将置灰，提示文字在 slot disabledRegionCityTip中设置
            },
        ]
    }
]
`;
    const cdsRegionTable = [
        {'attr': 'v-model', 'illustrate': '选中的可用区id', 'type': 'String', 'default': ''},
        {'attr': 'regionList', 'illustrate': '地域列表，包含地域及城市', 'type': 'Array', 'default': '[]'},
    ]
    const cdsRegionFunTable = [
        {'attr': 'change', 'illustrate': '修改触发方法'},
        {'attr': 'getCitySiteInfo', 'illustrate': '选中的城市及可用区的信息'},
    ]
    const region_list = ref([
        {
            "sort":1,
            "city_list":[
                {
                    "city_name":"法兰克福",
                    "city_id":"7b98a5d1-306e-11e7-9796-0050569b4d9c",
                    "disabled": "false",
                    "site_list":[
                        {
                            "sort":4,
                            "site_name":"可用区B",
                            "site_type":"vc",
                            "site_id":"bd8546e3-197c-47ef-b970-17364fb5132a",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":5,
                            "site_name":"可用区A",
                            "site_type":"bare_metal_vc",
                            "site_id":"1af1d06e-e2ad-41e7-97b0-ed77417fd3d4",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":6,
                            "site_name":"可用区C",
                            "site_type":"bare_metal",
                            "site_id":"2d493ded-d198-4474-ab0e-4fa2e4434dc0",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":9,
                            "site_name":"可用区D",
                            "site_type":"vc",
                            "site_id":"4c846315-3710-48f5-a79d-1eaae0844544",
                            "wan_sale_out":false,
                            "site_sale_out":true,
                            "vm_sale_out":false
                        }
                    ],
                    "sort":2
                }
            ],
            "region_id":"6475773a-fa78-11e6-88c6-30b49e091019",
            "region_name":"欧洲地区"
        },
        {
            "sort":1,
            "city_list":[
                {
                    "city_name":"北京",
                    "city_id":"ea3ca775-306c-11e7-9796-0050569b4d9c",
                    "site_list":[
                        {
                            "sort":33,
                            "site_name":"可用区L",
                            "site_type":"bare_metal",
                            "site_id":"4897f749-055d-4853-b7fc-0408bc25a123",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":34,
                            "site_name":"可用区J",
                            "site_type":"bare_metal",
                            "site_id":"039ec85f-73f0-4864-9a6b-8b5e1623293a",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":37,
                            "site_name":"可用区I",
                            "site_type":"bare_metal",
                            "site_id":"19ae7357-9dbb-45a6-8100-9d5d292ca4b8",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":43,
                            "site_name":"可用区H",
                            "site_type":"bare_metal_vc",
                            "site_id":"6b4afbae-2ae8-11ea-b085-005056a81530",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":45,
                            "site_name":"可用区F（内测）",
                            "site_type":"bare_metal",
                            "site_id":"852b812b-7003-461f-902a-cdcba52d72b5",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":51,
                            "site_name":"可用区E",
                            "site_type":"vc",
                            "site_id":"ca0bd848-9b59-40a2-9f57-d64fbc72a9df",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":55,
                            "site_name":"可用区C",
                            "site_type":"vc",
                            "site_id":"fdd523fe-fe6c-434a-a817-9b415a0206e8",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":57,
                            "site_name":"可用区B",
                            "site_type":"vc",
                            "site_id":"843ff9be-b977-4ca1-ab59-d5680caa9b94",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":58,
                            "site_name":"可用区A",
                            "site_type":"vc",
                            "site_id":"a18d6c6a-9619-418a-8526-2878f2653d5f",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":73,
                            "site_name":"可用区Z",
                            "site_type":"vc",
                            "site_id":"3530a71a-954b-11ec-9b27-2a8d1f4e167e",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":74,
                            "site_name":"可用区K",
                            "site_type":"bare_metal",
                            "site_id":"39278e72-e62e-11ec-a784-de9cdbe1b6a2",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":75,
                            "site_name":"可用区Y",
                            "site_type":"vc",
                            "site_id":"a585c354-e358-11ed-8782-661a89fcabe8",
                            "wan_sale_out":false,
                            "site_sale_out":true,
                            "vm_sale_out":false
                        }
                    ],
                    "sort":17
                },
                {
                    "city_name":"广州",
                    "city_id":"c11a5abe-3f7e-11e7-86b1-0242ac11000e",
                    "site_list":[
                        {
                            "sort":64,
                            "site_name":"可用区A",
                            "site_type":"vc",
                            "site_id":"c4089dcd-15c2-4caf-9d1e-874770a31880",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        }
                    ],
                    "sort":18
                },
                {
                    "city_name":"无锡",
                    "city_id":"123d0d01-306d-11e7-9796-0050569b4d9c",
                    "site_list":[
                        {
                            "sort":65,
                            "site_name":"可用区B",
                            "site_type":"bare_metal",
                            "site_id":"7da056cf-67f1-4e10-b673-8a5de05d0cd7",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":66,
                            "site_name":"可用区A",
                            "site_type":"vc",
                            "site_id":"de0b0931-4c14-4f0b-ab60-7e1768241136",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        }
                    ],
                    "sort":19
                },
                {
                    "city_name":"上海",
                    "city_id":"b44355d0-65e7-11e7-8ea9-0050569b651c",
                    "site_list":[
                        {
                            "sort":62,
                            "site_name":"可用区C",
                            "site_type":"vc",
                            "site_id":"b8fb9d9a-28a6-4a33-8754-43647d1d5740",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        },
                        {
                            "sort":63,
                            "site_name":"可用区A",
                            "site_type":"vc",
                            "site_id":"b26322d9-6dc0-4a60-a46e-c8aa6a00163b",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        }
                    ],
                    "sort":20
                },
                {
                    "city_name":"呼和浩特",
                    "city_id":"cdc9be22-a6f8-11eb-be28-ca1003d55bcc",
                    "site_list":[
                        {
                            "sort":29,
                            "site_name":"可用区A",
                            "site_type":"bare_metal",
                            "site_id":"c249ba50-ae11-11eb-aaa6-1eed1657c50a",
                            "wan_sale_out":false,
                            "site_sale_out":false,
                            "vm_sale_out":false
                        }
                    ],
                    "sort":22
                }
            ],
            "region_id":"408fd19e-fa78-11e6-bd9a-30b49e091019",
            "region_name":"中国大陆"
        },
    ])
    const region_list2 = ref([
        {
            "zone_id":"6475773a-fa78-11e6-88c6-30b49e091019",
            "zone_name":"欧洲地区",
            "region_list":[
                {
                    "region_name":"法兰克福",
                    "region_id":"7b98a5d1-306e-11e7-9796-0050569b4d9c",
                    "available_zone_list": [
                        {
                            "available_zone_id": '1111',
                            "available_zone_name": "可用区A"
                        },
                        {
                            "available_zone_id": '44444',
                            "available_zone_name": "可用区D"
                        }
                    ],
                    "disabled": true // 若为true，该城市将置灰，提示文字在 slot disabledCityTip中设置
                },
                {
                    "region_name":"巴黎",
                    "region_id":"ea3ca775-306c-11e7-9796-0050569b4d9c",
                    "available_zone_list": [
                        {
                            "available_zone_id": '2222',
                            "available_zone_name": "可用区B",
                            "disabled": true
                        },
                        {
                            "available_zone_id": '3333',
                            "available_zone_name": "可用区C"
                        }
                    ],
                    "disabled": false // 若为true，该城市将置灰，提示文字在 slot disabledCityTip中设置
                }
            ]
        }
    ])

    site.value = region_list.value[1].city_list[1].site_list[0].site_id

    const getRegionSite = (v) => {
        text.value = v
    }


</script>

<style scoped>

</style>